DAY12-JavaScript（二）

2021 iThome 鐵人賽

DAY 12

Modern Web

1995到2021，php到react網站開發歷程系列第 12 篇

13th鐵人賽 javascript dom

Cooksuhr

團隊Obit0 Studio

2021-09-24 14:59:15

1016 瀏覽

分享至

a-website-2gb-of-javascript-just-a-bit-more-46331875.png

前言：

昨天我們介紹了JavaScript幾個最基本的用法，今天我打算來介紹JavaScript是如何跟網頁做互動的！這裡阿森來講一下JavaScript在操作上給我的感覺好了，我覺得可以分成以下幾個步驟：

抓到你想操控的部分→設定在哪種情況(event)下要做出什麼動作(handler)→設定這些動作(handler)

這樣說起來很簡單，可是當這些動作越來越複雜、互相牽扯的時候，你可能會發現你的coding和網頁資料夾已經達到一個非常龐大的程度...但這都是要完成一個好網頁要做出的犧牲！（對吧...）

那就讓我們開始今天的介紹吧！

HTML的部分～：

在HTML裡我們要先寫出幾個拿來操作的tag，我們就先寫一個h1 tag當標題好了！再來為了演示event我們再加一個button tag吧！

<h1>Sen's Webpage</h1>

<ul class = "msg-list">
	<li>msg 1</li>
	<li>msg 2</li>
	<li>msg 3</li>
	<li>msg 4</li>
</ul>

<input class="input" type="text" />
<button class = "submit">submit</button>

所以這時候我們的body會變這樣：

<body>
    <h1>Sen's Webpage</h1>

		<ul class = "msg-list">
        <li>msg 1</li>
        <li>msg 2</li>
        <li>msg 3</li>
        <li>msg 4</li>
    </ul>
		
		<input class="input" type="text" />
		<button class = "submit">submit</button>
</body>

再來我們創建一個新的js檔，取名為app.js，透過script tag把它引入，在把我們剛剛的tag分別加上幾個class，這時候我們的body會變這樣：

<body>
    <h1>Sen's Webpage</h1>

		<ul class = "msg-list">
        <li>msg 1</li>
        <li>msg 2</li>
        <li>msg 3</li>
        <li>msg 4</li>
    </ul>
		
		<input class="input" type="text" />
		<button class = "submit">submit</button>
    <script src="./app.js"></script>
</body>

當你看到頁面變成這樣時，html就大概完成了喔！

截圖 2021-08-24 下午4.12.53.png

JavaScript & DOM：

在開始寫JavaScript之前，我想先介紹一下一直提到的DOM到底是什麼，其實DOM就是所謂的文件物件模型（Document Object Model），它可以把html中的各種元素用樹狀結構方法表示出來，像下圖這樣：

更進一步來說，DOM 是擁有屬性與函式節點、物件組成的結構化表示法。節點也可以附加事件處理程序，一旦觸發事件就會執行處理程序，讓我們可以更方便的讓程式存取、改變文件架構、風格和內容。

介紹完了DOM就要來介紹今天最主要的部分啦，如何抓取這些元素呢？

這時候我們會用到幾個javascript的指令：

const text = document.querySelector(".title");

簡單來說就是透過document裡面的querySelector來抓取我們的class，再指派一個const去代表這個元素，如此一來透過text我們就可以操作title這個class的元素了。

我們可以透過它來更改一些東西：

text.style.backgroundColor = "lightblue";

或是引入同一個目錄下css檔案裡的某項選擇器：

//in css
.text {
	color: lightblue;
	border: 12px solid darkblue;
	font-size: 50px
}

//in JavaScript
text.classList.add("text")

也可以成功套用。

再來我們可以加一些事件的反饋：

const msgInput = document.querySelector(".input");
const submit = document.querySelector(".submit");
const msgList = document.querySelector(".msg-list");

submit.addEventListener("click", () => {
	const newLi = document.createElement("LI");
	const liContent = document.createTextNode(msgInput.value);
	newLi.appendChild(liContent);
	msgList.appendChild(newLi);
});

這時候我們網頁就變這樣：

截圖 2021-08-24 下午4.39.27.png

我們可以輸入測試訊息：

截圖 2021-08-24 下午4.40.19.png